<template>
  <div class="form-container">
    <el-form label-width="120px"
             :model="teacher"
             ref="teacherForm"
             status-icon
             :rules="teacherRules">

      <el-form-item label="讲师名称" prop="name">
        <el-input v-model="teacher.name"
                  maxlength="20"
                  oninput="value=value.replace(/[^\u4E00-\u9FA5]/g, '');"
                  show-word-limit
                  style="width: 221px"
                  clearable>
        </el-input>
      </el-form-item>

      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" clearable placeholder="请选择">
          <el-option :value="0" label="高级讲师"/>
          <el-option :value="1" label="首席讲师"/>
        </el-select>
      </el-form-item>

      <el-form-item label="讲师排序">
        <el-input-number
          style="width: 221px;"
          v-model="teacher.sort"
          :min="0"
          :max="999">
        </el-input-number>
      </el-form-item>

      <el-form-item label="讲师资历" prop="intro">
        <el-input
          v-model="teacher.intro"
          style="width:90%;"
          maxlength="100"
          show-word-limit
          clearable/>
      </el-form-item>

      <el-form-item label="讲师简介" prop="career">
        <el-input
          v-model="teacher.career"
          :rows="10" type="textarea"
          style="width: 90%"
          maxlength="500"
          show-word-limit>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="updateTeacher()">确认修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getTeacherById, updateTeacherById } from '@/api/teacher'
  import { validNormal,validName } from '@/utils/validate'

  export default {
    data() {

      //检验资历
      const validateIntro = (rule, value, callback) => {
        if (value.length < 5 || value.length > 100 || !validNormal(value)){
          callback(new  Error("请输入正确的资历，长度要求为5-100，且不能输入特殊字符"))
        }
        else callback()
      }

      //检验简介
      const validateCareer = (rule, value, callback) => {
        if (value.length < 50 || value.length > 500 || !validNormal(value)){
          callback(new  Error("请输入正确的简介，长度要求为50-500，且不能输入特殊字符"))
        }
        else callback()
      }

      //检验姓名
      const validateName = (rule, value, callback) => {
        if (!validName(value)){
          callback(new  Error("请输入正确的姓名，长度要求为2-10，只能输入中文"))
        }
        else callback()
      }

      return {
        teacher: {
          TeacherId: '',
          name: '',
          level: 1,
          career: '',
          intro: '',
          sort: ''
        },
        saveBtnDisabled: false, // 保存按钮是否禁用
        //检验规则
        teacherRules:{
          intro:[{validator: validateIntro,trigger: 'blur'}],
          career:[{validator: validateCareer,trigger: 'blur'}],
          name:[{validator: validateName,trigger: 'blur'}],
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      init(){
        if (this.$route.params && this.$route.params.id) {
          const id = this.$route.params.id
          this.fetchDataById(id)
        } else {
          // 使用对象拓展运算符，拷贝对象，而不是引用，
          // 否则新增一条记录后，defaultForm就变成了之前新增的teacher的值
          this.teacher = { ...defaultForm }
        }
      },
      fetchDataById(id){
        getTeacherById(id).then(result => {
          this.teacher.teacherId = result.data.item.teacherId
          this.teacher.name = result.data.item.name
          this.teacher.level = result.data.item.level
          this.teacher.career = result.data.item.career
          this.teacher.intro = result.data.item.intro
          this.teacher.sort = result.data.item.sort
        })
      },
      updateTeacher(){
        this.$refs.teacherForm.validate((valid) => {
          if (valid) {
            //检验通过
            updateTeacherById(this.teacher.teacherId,this.$qs.stringify(this.teacher))
              .then(result => {
                this.$message({
                  type: 'success',
                  message: '修改成功！'
                })
                this.$router.push({ path: '/manage/teacher' })
              })
          }
          else {
            return false;
          }
        })
      },
    },
    watch:{
      $route(to, from) {
        this.init()
      }
    }
  }
</script>

<style scoped>
  .form-container{
    margin-top: 20px;
    margin-left: -25px;
  }
</style>
